<template>
    <div class="user">
        <van-nav-bar title="我的下级" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>
        <div style="width: 100%;height: 150px;background-color: #389138;z-index: -999999">
            <van-row>
                <van-col span="10">
                    <div
                        style="text-align: center;margin-top: 30px;margin-left: 30px;font-family: MiSans, MiSans;font-weight: 500;font-size: 28px;color: #FFFFFF;">
                        {{ total }}
                    </div>
                </van-col>
                <van-col span="14">
                    <div
                        style="text-align: center;margin-top: 30px;margin-left: 30px;font-family: MiSans, MiSans;font-weight: 500;font-size: 28px;color: #FFFFFF;">
                        {{ totalMoney }}
                    </div>
                </van-col>
            </van-row>

            <van-row>
                <van-col span="10">
                    <div
                        style="text-align: center;margin-top: 10px;margin-left: 30px;font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: rgba(255,255,255,0.9);">
                        邀请人数
                    </div>
                </van-col>
                <van-col span="14">
                    <div
                        style="text-align: center;margin-top: 10px;margin-left: 30px;font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: rgba(255,255,255,0.9);">
                        带来收益(元)
                    </div>
                </van-col>
            </van-row>
        </div>


        <div
            style="width: 100%;height: 60vh;border-radius: 30px 30px 0px 0px;z-index: 99999;position: absolute;top: 160px;background-color: #F5F5F5;">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item, index) in list" :key="index">
                    <div class="user-order3">
                        <div style="display: flex;padding-top: 12px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #181818;margin-left: 17px;width: 64px;">
                                人员名称</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;position: absolute;float: right;right: 30px;">
                                {{ item.username }}</div>
                        </div>
                        <div style="display: flex;padding-top: 19px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 64px;">
                                带来收益</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 30px;">
                                ￥{{ item.order_money }}</div>
                        </div>

                        <div style="display: flex;padding-top: 14px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 64px;">
                                注册时间</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #A2A2AA;position: absolute;float: right;right: 30px;">
                                {{ item.jointime_text }}</div>
                        </div>

                    </div>
                </div>
            </van-list>
            <div v-if="list.length == 0">
                <van-list :finished="true" :immediate-check="false">
                    <div class="main2" style="text-align: center;height: 200px;">
                        <img src="@/assets/homr/Group 9420.png" alt="logo"
                            style="width: 180px;height: 120px;margin-top: 40px;">
                        <div>暂无内容</div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>

import { getChildren } from '@/api/user'


export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            list: [],
            total: "",
            totalMoney: 0,
            loading: false,
            finished: false,
            page: 1,
        };
    },
    mounted() {
        // this.getChildren()
    },
    methods: {
        onLoad() {
            this.loading = true
            let obj = {
                page: this.page++,
                pageSize: 5
            }
            getChildren(obj).then((res) => {

                this.loading = false;
                this.list = [...this.list, ...res.data.list]; // 上一页数据跟新加载的数据做合并
                // 判断数据是否加载完毕
                if (res.data.list.length < 1) {
                    // 将finished设置为true,表示所有数据加载完毕
                    this.finished = true;
                }
                this.total = res.data.total
                this.totalMoney = res.data.money

            })
        },
        // getChildren() {
        //     let obj = {
        //         page: 1,
        //         pageSize: 100
        //     }
        //     getChildren(obj).then((res) => {
        //         this.list = res.data.list
        //         this.total = res.data.total
        //         this.totalMoney = res.data.money

        //     })
        // },
        onClickLeft() {
            this.$router.back()
        }
    },

    computed: {

    }
}
</script>

<style scoped>
.user-order3 {
    width: 702px;
    height: 210px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>